<template>
  <view class="no-data-box">
    <view class='no-data' v-if="!loading">
      <image :src='icon' class="no-img" v-if="!list.length && icon" />
      <view v-if="!list.length" class="count-box">
        <view class='count'>{{ title || "" }}</view>
        <view class='slot-count'>
          <slot />
        </view>
      </view>
      <text class='count1' v-else>{{ list.length >= total ? "我是有底线的" : "下拉加载更多" }}</text>
    </view>
    <view class='no-loading' v-if="loading">
      <view>加载中...</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //没有数据时显示的图片
    icon: {
      type: String,
      default: ''
    },
    //没有数据时显示的文字
    title: {
      type: String,
      default: '暂无数据'
    },

    //是否加载中...
    loading: {
      type: Boolean,
      default: false
    },
    //列表数据
    list: {
      type: Array,
      default: []
    },
    // 总条数
    total: {
      type: Number,
      default: 0
    }
  },
  setup() {
    return {

    }
  },
};
</script>

<style lang="less">
@import "./index.less";
</style>